<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建试卷</title>
</head>
<body>

	<h2>创建试卷</h2>
	<form:form action="/paper/save" method="post" modelAttribute="paper">
		<div>试卷名：<form:input path="name"/></div>
		<div>试卷题数：<form:input path="questionNums"/></div>
		<div>考试时间：<form:input path="examTime"/></div>
		<form:hidden path="id"/>
		<div><form:button>提交</form:button></div>
	</form:form>
	
	<h2>创建试卷-AJAX提交表单,以默认x-www-form-urlencoded的方式</h2>
	<form id="form2">
		<div>试卷名：<input type="text" name="name" value="${paper.name}"/></div>
		<div>试卷题数：<input type="text" name="questionNums"/></div>
		<div><input type="button" value="提交" id="submit2"/></div>
		<div id="info"></div>
	</form>
	
	<h2>创建试卷-AJAX提交表单,以JSON对象的形式传给后端,后端控制层方法形参要加@RequestBody</h2>
	<form id="form3">
		<div>试卷名：<input type="text" name="name"/></div>
		<div>试卷题数：<input type="text" name="questionNums"/></div>
		<div><input type="button" value="提交" id="submit3"/></div>
	</form>
	
	<h2>上传图片</h2>
	<form id="form4" method="post" action="/paper/upload" enctype="multipart/form-data">
		<div>选择图片：<input type="file" name="fileName"/></div>
		<div><input type="submit" value="提交" /></div>
	</form>


	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
	$(function(){
		$('#submit2').click(function(){
			var data = $('#form2').serialize();//把表单序列化成x-form-www-urlencoded的格式
			$.ajax({
			   type: "POST",
			   url: "/paper/save2",
			   data: data,//"name=John&location=Boston",
			   dataType: 'json',//后端返回的是JSON
			   success: function(msg){
				   if(msg.code==200){
					   $('#info').html("<span style='color:green'>"+msg.message+"</span>");
				   }else{
					   $('#info').html("<span style='color:red'>"+msg.message+"</span>");
				   }
			   }
			});
		});

		$('#submit3').click(function(){
			var data = {name:"java试卷", questionNums:10};
			data = JSON.stringify(data);//转成JSON串，相反的函数 JSON.parse(json串)
			$.ajax({
			   type: "POST",
			   url: "/paper/save3",
			   data: data,
			   contentType: 'application/json',//明确指定客户端传给后端的是JSON
			   success: function(msg){ 
			     alert( "Data Saved: " + msg );
			   }
			});
		});
	});
	</script>
</body>
</html>